<script lang="ts" setup>
// @ts-ignore
import { onBeforeMount, onMounted, ref } from "vue";
// @ts-ignore
import { useCascaderAreaData } from "@vant/area-data";
// @ts-ignore
import instance from "../axios/index.ts";
// @ts-ignore
import { useRouter } from "vue-router";
// @ts-ignore
import hometab1 from "../components/home/hometab1.vue";
// @ts-ignore
import homeDermatology from "../components/home/homeDermatology.vue";
// @ts-ignore
import homegynecology from "../components/home/homegynecology.vue";
// @ts-ignore
import homesurgery from "../components/home/homesurgery.vue";
// @ts-ignore
import homeOtorhinolaryngology from "../components/home/homeOtorhinolaryngology.vue";
// @ts-ignore
import homeDietetics from "../components/home/homeDietetics.vue";
// @ts-ignore
import homeHealth from "../components/home/homeHealth.vue";
// @ts-ignore
import homeGoods from "../components/home/homeGoods.vue";
// @ts-ignore
import { useCounterStore } from "../pinia/index.ts";
// @ts-ignore
import homeMapLocation from "../components/home/homeMapLocation.vue";
// 位置

// 跳转到商家入驻页面
const gosettle = () => {
  router.push('/settle')
}
// 滚动条
const searchValue = ref<string>("");
const defaultContents = ref<string[]>([]);
let currentIndex = ref<number>(0);
let intervalId: ReturnType<typeof setInterval>;
const switchContent = () => {
  currentIndex.value = (currentIndex.value + 1) % defaultContents.value.length;
  searchValue.value = defaultContents.value[currentIndex.value];
};
onMounted(() => {
  searchValue.value = defaultContents.value[currentIndex.value];
  intervalId = setInterval(switchContent, 3000);
});

onBeforeMount(() => {
  clearInterval(intervalId);
});
// @ts-ignore
interface Option {
  text: string;
  // 其他属性...
}

// 搜索
const jumpSearchpages = () => {
  router.push("/home/searchpage");
};

// 掉接口
const arr: any = ref([]);
instance.post("/api/homeall").then((res: any) => {
  arr.value = res.data.data;
});

// 上拉加载
const list: any = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1); //当前页数
const pageSize = ref(10); //每页条数
// @ts-ignore
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    page.value += 1;
    instance.post("/api/homeall").then((res: any) => {
      let newarr = res.data.data.splice(page.value * pageSize.value, 10);
      list.value = [...list.value, ...newarr];
    });

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 500) {
      finished.value = true;
    }
  }, 1000);
};

// 跳转
const router = useRouter();

const Goregister = () => {
  router.push("/goregister");
};

const gocooperate = () => {
  router.push("/cooperate");
};

const JumpInterrogation = () => {
  router.push("/interrogation");
};

const JumpMedical = () => {
  router.push("/medical");
};

const JumpEntire = () => {
  router.push("/entire");
};

const JumpNumberCenter = () => {
  router.push("/NumberCenter");
};

const SignIn = () => {
  router.push("/healthyDetails");
};

const JumpVideoPlayer = () => {
  router.push("/videoPlayer");
};
</script>
<template>
  <div class="app">
    <header>
      <div>
        <span class="location">
          <homeMapLocation></homeMapLocation>
        </span>
        <span class="picture1">
          <img src="https://kano.guahao.com/8dp830815915" alt="" />
        </span>
        <span @click="SignIn()" class="picture2">
          <img src="https://kano.guahao.com/Uab820355524" alt="" />
        </span>
      </div>
    </header>
    <main>
      <van-sticky>
        <div class="main1" style="position: relative">
          <input type="text" name="" id="" @click="jumpSearchpages" />
          <button>搜索</button>
          <div class="scrolling-text">
            <span>一病多问</span>
            <span>专家问诊</span>
            <span>健康VIP</span>
          </div>
        </div>
      </van-sticky>
      <div class="main2">
        <div @click="JumpMedical">
          <img src="https://kano.guahao.com/W51849727945?webp=80" alt="" />
          <h3>快速问诊</h3>
          <p>3分钟内医生接诊</p>
        </div>
        <div @click="JumpInterrogation" class="expert">
          <img src="https://kano.guahao.com/2x4849728905?webp=80" alt="" />
          <img
            class="now"
            src="https://kano.guahao.com/BJ1844511181.gif?webp=80"
            alt=""
          />
          <h3>专家问诊</h3>
          <p>专家实时服务在线</p>
        </div>
        <div @click="Goregister">
          <img src="https://kano.guahao.com/U0m513250003?webp=80" alt="" />
          <h3>去挂号</h3>
          <p>千家号源免费预约</p>
        </div>
      </div>
      <div class="main3" @click="JumpEntire">
        <img src="https://kano.guahao.com/vGY932025012?webp=80" alt="" />
      </div>
      <div class="main4">
        <div>
          <img src="https://kano.guahao.cn/YRE830597743?webp=80" alt="" />
          <p>一病多问</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/EnS909960278?webp=80" alt="" />
          <p>健康商城</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/dhU931846538?webp=80" alt="" />
          <p>脱敏无忧</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/RZg920431364?webp=80" alt="" />
          <p>问诊购物</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/w1N929462309?webp=80" alt="" />
          <p>健康好物</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/UmU914800663?webp=80" alt="" />
          <p>专病专科</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/eyN913148782?webp=80" alt="" />
          <p>药食同源</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/eyN913148782?webp=80" alt="" />
          <p>三甲体检</p>
        </div>
        <div>
          <img src="https://kano.guahao.cn/oM1927869827?webp=80" alt="" />
          <p>中医调理</p>
        </div>
        <div @click="JumpVideoPlayer">
          <img src="https://kano.guahao.cn/iL1930830930?webp=80" alt="" />
          <p>健康助手</p>
        </div>
      </div>
      <div class="main5" @click="JumpNumberCenter">
        <img src="https://kano.guahao.com/yfl929063197" alt="" />
      </div>
      <div class="main6">
        <img src="../img/皮肤专区.png" alt="" />
        <img src="../img/儿科专区.png" alt="" />
        <img src="../img/妇科专区.png" alt="" />
        <img src="../img/减重专区.png" alt="" />
        <img src="../img/肠胃专区.png" alt="" />
        <img src="../img/心里专区.png" alt="" />
      </div>
      <div class="main7">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item>
            <img src="https://kano.guahao.com/6aD932278297" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="https://kano.guahao.com/ogV924963574" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="https://kano.guahao.com/W7w929606964" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <h2>会员服务</h2>
      <div class="main8">
        <div>
          <img src="../img/育儿指南.png" alt="" />
        </div>
        <div>
          <img src="../img/骨科康复.png" alt="" />
        </div>
        <div>
          <img src="../img/健康VIP.png" alt="" />
        </div>
        <div>
          <img src="../img/企业会员.png" alt="" />
        </div>
      </div>
      <p>
        <b style="font-size: 0.25rem; margin-left: 0.115rem">服务精选</b>
      </p>
      <div class="main9">
        <img src="../img/过敏.png" alt="" @click="gocooperate" />
      </div>
      <div class="main10">
        <!-- 大tab -->
        <van-tabs>
          <van-tab title="医生推荐">
            <van-tabs>
              <!-- 小tab -->
              <van-tab title="全部">
                <keep-alive>
                  <hometab1 />
                  
                </keep-alive>
              </van-tab>
              <van-tab title="皮肤科">
                <keep-alive>
                  <homeDermatology />
                </keep-alive>
              </van-tab>
              <van-tab title="妇科">
                <keep-alive>
                  <homegynecology />
                </keep-alive>
              </van-tab>
              <van-tab title="普外科">
                <keep-alive>
                  <homesurgery />
                </keep-alive>
              </van-tab>
              <van-tab title="耳鼻咽喉科">
                <keep-alive>
                  <homeOtorhinolaryngology />
                </keep-alive>
              </van-tab>
              <van-tab title="营养科">
                <keep-alive>
                  <homeDietetics />
                </keep-alive>
              </van-tab>
            </van-tabs>
          </van-tab>
          <van-tab title="好物推荐">
            <keep-alive>
              <homeGoods />
            </keep-alive>
          </van-tab>
          <van-tab title="健康科普">
            <keep-alive>
              <homeHealth />
            </keep-alive>
          </van-tab>
        </van-tabs>
        <van-back-top />
      </div>
    </main>
  </div>
</template>
<style scoped lang="scss">
.app {
  width: 100%;
  background: #f4f6fa;
  // overflow: scroll;

  header {
    width: 100%;
    height: 0.6rem;
    background: rgb(71, 124, 254);
    line-height: 0.6rem;

    div {
      // width: 3.7rem;
      width: 100%;
      height: 0.6rem;
      background: rgb(71, 124, 254);
      position: static;
      top: 0;

      .location {
        width: 0.9rem;
        height: 0.6rem;
        display: inline-block;
        float: left;
      }

      .picture1 {
        width: 2rem;
        height: 0.6rem;
        display: inline-block;
        float: left;
        img {
          width: 100%;
          height: 0.3rem;
          padding-top: 0.15rem;
        }
      }

      .picture2 {
        width: 0.4rem;
        height: 0.4rem;
        display: inline-block;
        float: left;
        margin-left: 0.45rem;
        margin-top: 0.1rem;

        img {
          width: 0.3rem;
          height: 0.3rem;
          padding-top: 0.08rem;
        }
      }
    }
  }

  main {
    width: 100%;

    .main1 {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to bottom, rgb(71 124 254), #f4f6fa);

      input {
        width: 80%;
        height: 0.4rem;
        border-radius: 0.3rem;
        border: none;
        outline: none;
        margin-left: 0.2rem;
        margin-top: -0.2rem;
        position: relative;
      }

      button {
        width: 15%;
        height: 0.3rem;
        border-radius: 0.3rem;
        border: none;
        outline: none;
        background: rgb(71 124 254);
        color: white;
        margin-left: 0.1rem;
        position: absolute;
        right: 0.3rem;

        top: 0.85rem;

        top: 0.25rem;
      }

      .scrolling-text {
        position: absolute;
        top: 0.25rem;
        left: 0.5rem;
        width: 1rem;
        height: 30%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .scrolling-text span {
        color: #ccc;
        white-space: nowrap;
        animation: scroll-up 5s linear infinite;
        /* 动画效果 */
      }

      @keyframes scroll-up {
        0% {
          transform: translateY(100%);
        }

        100% {
          transform: translateY(-100%);
        }
      }
    }

    .main2 {
      display: flex;
      width: 100%;
      height: 1.5rem;
      text-align: center;

      .expert {
        position: relative;

        .now {
          width: 0.4rem;
          height: 0.2rem;
          position: absolute;
          right: 0rem;
        }
      }

      p {
        font-size: 0.12rem;
      }

      img {
        width: 1rem;
        height: 1rem;
        margin-left: 0.24rem;
      }
    }

    .main3 {
      width: 100%;
      height: 0.5rem;
      img {
        width: 3.5rem;
        height: 1rem;
        margin-left: 0.14rem;
        height: 0.5rem;
        margin-top: 0.1rem;
      }
    }

    .main4 {
      display: flex;
      flex-wrap: wrap;
      padding: 0.1rem;
      text-align: center;
      font-size: 0.12rem;
      margin-top: 0.1rem;
      div {
        width: 0.65rem;
        margin-left: 0.05rem;

        img {
          width: 0.5rem;
          height: 0.5rem;
        }
      }
    }
    .main5 {
      width: 3.5rem;
      height: 1.5rem;
      border: 1px solid red;
      margin-left: 0.13rem;
      border-radius: 0.2rem;
      background: rgb(247, 234, 234);

      img {
        width: 100%;
        height: 100%;
        border: 1px solid red;
        border-radius: 0.2rem;
      }
    }

    .main6 {
      img {
        width: 1.1rem;
        height: 0.8rem;
        margin-top: 0.06rem;
        margin-left: 0.115rem;
        border-radius: 0.1rem;
      }
    }

    .main7 {
      width: 94%;
      height: 1rem;
      border-radius: 0.1rem;
      margin-left: 0.115rem;
      img {
        width: 100%;
        height: 1rem;
        border-radius: 0.1rem;
      }
    }

    h2 {
      margin-left: 0.115rem;
    }
    .main8 {
      width: 95%;
      height: 1.5rem;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
      margin-left: 0.115rem;
      /* 单个盒子的样式 */
      div {
        display: inline-block;
        width: 1.5rem;
        height: 1.4rem;
        margin-right: 10px;
        margin-top: 0.06rem;

        img {
          width: 1.5rem;
          height: 1.4rem;
          border-radius: 0.1rem;
        }
      }
    }

    .main9 {
      width: 100%;
      height: 1rem;

      img {
        width: 3.5rem;
        height: 0.6rem;
        margin-left: 0.15rem;
        margin-top: 0.2rem;
      }
    }

    .main10 {
      width: 100%;
      height: 4rem;

      // overflow: scroll;
      .tab {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 50%;

          img {
            width: 100%;
          }

          h4 {
            color: red;
          }
        }
      }
    }
  }
}
.fixed {
  width: 0.8rem;
  text-align: center;
  align-items: center;
  line-height: 0.2rem;
  height: 0.8rem;
  background: skyblue;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  position: fixed;
  right: 0;
  top: 5rem;
}
</style>